<template>
  <div class="AnSomeone">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Blog_Analysis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Blog_Analysis</el-breadcrumb-item>
        <el-breadcrumb-item>AnSomeone</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="one">
          <!-- 表格数据展示 -->
          <!-- <el-table :data="myData" stripe style="width: 100%"> -->
          <el-table 
            :data="myData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            style="width: 100%"
            stripe
            :row-class-name="tableRowClassName">

            <!-- 多选功能
            <el-table-column type="selection" width="40">
            </el-table-column> -->

            <!-- 基本内容 -->
            <el-table-column prop="title" label="文章标题"  :width="table_width+30" fixed>
              <template v-slot="scope">
                <!-- <a :href="scope.row.url">{{ scope.row.title }}</a> -->
                <el-link type="primary" :href="scope.row.url" :underline="true">{{ scope.row.title }}</el-link>
              </template>
            </el-table-column>
      
            <el-table-column prop="time" label="发布时间"  :width="table_width">
              <template v-slot="scope">
                <!-- {{ scope.row.time | dateFormat }} -->
                <el-link :underline="false" type="warning">{{ scope.row.time | dateFormat }}</el-link>
              </template>
            </el-table-column>
      
            <el-table-column prop="watchs" label="阅读量"  :width="table_width">
              <template v-slot="scope">
                <el-tag type="warning">{{ scope.row.watchs }}</el-tag>
              </template>
            </el-table-column>
      
            <el-table-column prop="readDuration" label="总阅读时间"  :width="table_width">
              <template v-slot="scope">
                <el-tag type="warning">{{ scope.row.readDuration }}</el-tag>
              </template>
            </el-table-column>
      
            <el-table-column prop="column" label="所属专栏"  :width="table_width">
            </el-table-column>
      
      
            <el-table-column prop="likes" label="点赞量"  :width="table_width-20">
              <template v-slot="scope">
                <el-tag type="warning">{{ scope.row.likes }}</el-tag>
              </template>
            </el-table-column>
      
      
            <el-table-column prop="comments" label="评论量"  :width="table_width-20">
              <template v-slot="scope">
                <el-tag type="warning">{{ scope.row.comments }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="stars" label="收藏量"  :width="table_width-20">
              <template v-slot="scope">
                <el-tag type="warning">{{ scope.row.stars }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="author" label="作者"  :width="table_width">
              <template v-slot="scope">
                <!-- <a :href="scope.row.author_url">{{ scope.row.author }}</a> -->
                <el-link type="danger" :href="scope.row.author_url" :underline="true">{{ scope.row.author }}</el-link>
              </template>
            </el-table-column>

            <el-table-column prop="author_lever" label="作者等级"  :width="table_width">
              <template v-slot="scope">
                <el-tag type="success">{{ scope.row.author_lever }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="author_articles" label="作者文章数"  :width="table_width-10">
              <template v-slot="scope">
                <el-tag type="success">{{ scope.row.author_articles }}</el-tag>
              </template>
            </el-table-column>

      
            <el-table-column prop="author_watchs" label="创作被阅读数"  :width="table_width-10">
              <template v-slot="scope">
                <el-tag type="success">{{ scope.row.author_watchs }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="author_fans" label="作者粉丝数"  :width="table_width-10">
              <template v-slot="scope">
                <el-tag type="success">{{ scope.row.author_fans }}</el-tag>
              </template>
            </el-table-column>
      
            <el-table-column prop="category" label="文章标签"  :width="table_width+30">
              <template v-slot="scope">
                <!-- <el-tag type="danger">{{ scope.row.category }}</el-tag> -->
                <el-link :underline="false" type="primary">{{ scope.row.category }}</el-link>
              </template>
            </el-table-column>
      
            <el-table-column prop="topic" label="参与活动"  :width="table_width+30">
              <template v-slot="scope">
                <!-- <el-tag type="danger">{{ scope.row.topic }}</el-tag> -->
                <el-link :underline="false" type="success">{{ scope.row.topic }}</el-link>
              </template>
            </el-table-column>
      
          </el-table>
          <br>
      
          <!-- 分页 -->
          <div style="background-color:white; width: 100%;">
            <div class="block" >
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[1, 4, 7, 8, 10, 16, 32, 60]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="myData.length">
              </el-pagination>
            </div>
          </div>

      </div>

      <div style="margin-top: 20px; text-align: center; ">

        资源下载： 
        <el-link 
          icon="el-icon-printer" 
          href="http://127.0.0.1:8888/static/csv_collect/deep_articles.xlsx"
          style="font-size:larger; font-weight: 700; font-family: 'Helvetica Neue'"
          type="primary"
          :underline="true"
          >excel数据集文件</el-link>

        <div style="height: 50px;width: 50px;"></div>
    </div>
    </div>

  </div>
</template>
  
<script>
export default {
  data() {
    return {
      myData: [
        {
          url: "上万条数据正在路上",
          title: "上万条数据正在路上",
          time: "2023-11-02T01:35:36.000Z",
          watchs: "上万条数据正在路上",
          readDuration: "上万条数据正在路上",
          column: "上万条数据正在路上",
          likes: "上万条数据正在路上",
          comments: "上万条数据正在路上",
          stars: "上万条数据正在路上",
          author: "上万条数据正在路上",
          author_url: "上万条数据正在路上",
          author_lever: "上万条数据正在路上",
          author_articles: "上万条数据正在路上",
          author_watchs: "上万条数据正在路上",
          author_fans: "上万条数据正在路上",
          category: "上万条数据正在路上",
          topic: "上万条数据正在路上"
        },
        {
          url: "上万条数据正在路上",
          title: "上万条数据正在路上",
          time: "2023-11-02T01:35:36.000Z",
          watchs: "上万条数据正在路上",
          readDuration: "上万条数据正在路上",
          column: "上万条数据正在路上",
          likes: "上万条数据正在路上",
          comments: "上万条数据正在路上",
          stars: "上万条数据正在路上",
          author: "上万条数据正在路上",
          author_url: "上万条数据正在路上",
          author_lever: "上万条数据正在路上",
          author_articles: "上万条数据正在路上",
          author_watchs: "上万条数据正在路上",
          author_fans: "上万条数据正在路上",
          category: "上万条数据正在路上",
          topic: "上万条数据正在路上"
        },
        {
          url: "上万条数据正在路上",
          title: "上万条数据正在路上",
          time: "2023-11-02T01:35:36.000Z",
          watchs: "上万条数据正在路上",
          readDuration: "上万条数据正在路上",
          column: "上万条数据正在路上",
          likes: "上万条数据正在路上",
          comments: "上万条数据正在路上",
          stars: "上万条数据正在路上",
          author: "上万条数据正在路上",
          author_url: "上万条数据正在路上",
          author_lever: "上万条数据正在路上",
          author_articles: "上万条数据正在路上",
          author_watchs: "上万条数据正在路上",
          author_fans: "上万条数据正在路上",
          category: "上万条数据正在路上",
          topic: "上万条数据正在路上"
        }
      ],
      // 表格宽高，宽度是内部的，高度是大表格的，防止撑开不算overflow，命名歧义就不管了
      table_width: 100,
      table_height: 100,
      // 当前页码
      currentPage: 1,
      // 当前选择的每页多少条数据，来自:page-size里面数组选择项变化，触发的handleSizeChange()
      pageSize: 7,

      // 多选
      multipleSelection: [],
    }
  },
  mounted() {
    this.getSomeone()
    this.changeWidth()
  },
  methods: {
    // 修改每页多少条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },

    // 当前页编号
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },


    getSomeone() {
      // http://127.0.0.1:9292/someone
      this.$http({
        url: '/someone',
        method: 'post'
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取文章类别标签数据失败')
        } else {
          this.myData = res.data.data
        }
      })
    },

    // 表格奇偶行变色
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
    },

    // 根据one盒子宽高，分配表格列宽度，后期可以用computed计算属性，实时修改
    changeWidth() {
      const element = document.getElementById("one");
      const acturalWidth = element.offsetWidth;
      const acturalHeight = element.offsetHeight;
      // console.log(inlineWidth)
      this.table_width = acturalWidth / 15

    }
  }
        
}
</script>

<style scoped>
.AnSomeone {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}
/* 去除滚动栏，保留滚动效果 */
.AnSomeone::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */

  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}
/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#one {
  width: 100%;
  height: 94%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 4px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: scroll;
}

#one::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.el-table__row .warning-row {
  background: oldlace;
}
.el-table__row .success-row {
  background: #f0f9eb;
}
</style>